<template>
    <el-form ref="form" :rules="rules" :model="goods" label-width="80px" style="width: 600px">
        <el-form-item label="商品id">
            <el-input v-model="goods.gid" readonly></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsname">
            <el-input v-model="goods.goodsname"></el-input>
        </el-form-item>
        <el-form-item label="商品状态" prop="status">
        <el-select v-model="goods.status" placeholder="商品状态">
            <el-option label="待处理" value="待处理"></el-option>
            <el-option label="处理中" value="处理中"></el-option>
            <el-option label="已处理" value="已处理"></el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="商品分区" prop="district">
            <el-input v-model="goods.district"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="counts">
            <el-input v-model="goods.counts"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
            <el-input type="number" v-model="goods.price"></el-input>
        </el-form-item>
        <el-form-item label="商家id" prop="sellersId">
            <el-input v-model="goods.sellersId"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即修改</el-button>
            <el-button @click="subGoods()">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "goodsedit",
        data() {
            return {
                goods: {
                    gid:'',
                    goodsname: '',
                    status: '',
                    district: '',
                    counts: '',
                    price: 0,
                    sellersId: ''
                },
                rules:{
                    goodsname:[
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ],
                    price:[
                        { required: true, message: '请输入商品价格', trigger: 'blur' },
                        { type: 'number', message: '价格必须为数字值'}
                    ],
                    counts:[
                        { required: true, message: '请输入商品数量', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
            let gid = this.$route.query.gid
            console.log(gid)
            let _this = this
            axios.get('http://localhost:8888/chuyangc/goods/find/'+gid).then(function (response) {
                _this.goods = response.data
            })
        },
        methods: {
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let _this = this
                        axios.put('http://localhost:8888/chuyangc/goods/update',this.goods).then(function (response) {
                            if(response.data){
                                _this.$alert(_this.goods.goodsname+'修改成功！', '修改数据', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        //跳转到/table
                                        _this.$router.push('/goods')
                                    }
                                });
                            }
                        })
                    }
                });
            },
            subGoods(){
                this.$router.push('/goods')
            }
        }
    }
</script>

<style scoped>

</style>